<template>
  <view>
    <view class="numbert">
      <!-- 输入框 -->
      <view class="numbert1">
        <view class="numbert1-1">
          <view class="numbert1-11">
            收款户名
          </view>
          <view class="numbert1-12">
            <u-input v-model="recipientName" :type="type" :border="border" placeholder="请输入名称" input-align="right" />
          </view>
        </view>
        <view class="numbert1-1">
          <view class="numbert1-11">
            收款手机号
          </view>
          <view class="numbert1-12">
            <u-input v-model="recipientPhone" :type="type" :border="border" placeholder="请输入手机号" input-align="right" />
          </view>
        </view>
        <view class="numbert1-1">
          <view class="numbert1-11">
            收款银行
          </view>
          <view class="numbert1-12">
            <u-input v-model="recipientBank" :type="type" :border="border" placeholder="请输入银行" input-align="right" />
          </view>
        </view>
      </view>
      <!-- 选择付款卡 -->
      <view class="numbert2">
        <view class="numbert2-1">
          付款卡
        </view>
        <view class="numbert2-2">
          <image src="../../static/img/jiejikaaa.png" mode=""></image>
          <view class="numbert2-21">
            <view>
              借记卡（{{code1}}）
            </view>
            <view>
              可用余额 {{money}}元
            </view>
          </view>
          <image src="../../static/img/jiantouxiaa.png" mode=""></image>
        </view>
      </view>
      <!-- 输入转账金额 -->
      <view class="numbert3">
        <view class="numbert3-1">
          <view>
            转账金额
          </view>
          <view>
            转账说明
          </view>
        </view>
        <view class="numbert3-2">
          <text>￥</text>
          <u-input v-model="value3" :type="type" :border="border" placeholder="0手续费" />
        </view>
        <view class="numbert3-3">
          大写金额
        </view>
      </view>
      <!-- 转账附言 -->
      <view class="numbert4">
        <view class="numbert4-1">
          <view class="numbert4-11">
            转账附言
          </view>
          <u-input
            v-model="value4"
            :type="type"
            :border="border"
            placeholder="请输入附言"
            input-align="right"
            placeholder-style="font-size: 35rpx; color:rgba(128, 128, 128,0.5)"
            class="numbert4inp"
          />
        </view>
        <view class="numbert4-2">
          <view @click="fy1">生活费</view>
          <view @click="fy2">还信用卡</view>
          <view @click="fy3">工资</view>
        </view>
      </view>
	  
      <!-- 下一步 -->
      <view class="numbert5" @click="onNextStep">
        下一步
      </view>
	  <!-- 密码输入框和数字键盘 -->
	    <u-keyboard @change="onChange" ref="uKeyboard" v-model="showKeyboard" @backspace="onBackspace" mode="number" :dot-enabled="false" :tooltip="false" default="">
	    			<view style="text-align: center;">
	    				请输入密码
	    			</view>
	    			<u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password" :disabled-keyboard="true" @finish="finish"></u-message-input>
	    		</u-keyboard>
      <!-- 风险提示 -->
      <view class="numbert6">
        <view class="">风险提示:</view>
        <view class="">
          1、请勿轻易向陌生人收款人转账，谨防电信网络诈骗，做到“陌生电话勿轻信，对方身份要核清，家中隐私勿泄漏，涉及钱财需小心，遇到事情勿惊慌，及时拨打110”。
        </view>
        <view class="">2、为了您的资金安全，请务必妥善保管银行卡号、密码等个人重要信息。</view>
      </view>
    </view>
  </view>
</template>

<script>
	import {hqtransfer,accounttran} from "../../API/transfer.js"
export default {
  data() {
    return {
      recipientName: '',
      recipientPhone: '',
      recipientBank: '',
      value: '',
      type: 'text',
      border: false,
      value1: '',
      value2: '',
      value3: '',
      value4: '',
	  showKeyboard: false,//密码输入的显示隐藏
	  password: '',//输入的密码
	  code:"",
	  code1:"",
	  money:"",
	  fullBankCard:""
    };
  },
  onShow() {
  	this.BankAndSerial()
  },
  methods: {
	  onLoad(option){
	  	this.recipientName=option.name
	  	this.recipientPhone=option.number
		this.code=option.code
	  },
	  BankAndSerial(){
	  	hqtransfer().then((res)=>{
	  		if(res.data.code==200){
	  			console.log(res);
	  			this.code1=res.data.result.bankCard
	  			this.money=res.data.result.serial
	  			this.fullBankCard=res.data.result.fullBankCard
	  		}else{
	  			uni.showToast({
	  				title: res.data.msg,
	  				icon: 'error'
	  			});
	  			return;
	  		}
	  	}).catch((err)=>{
	  		console.log("获取失败");
	  	})
	  },
    fy1() {
      this.value4 = '生活费';
    },
    fy2() {
      this.value4 = '还信用卡';
    },
    fy3() {
      this.value4 = '工资';
    },
    validateInputs() {
      if (!this.recipientName || !this.recipientPhone || !this.recipientBank || !this.value3 || !this.value4) {
        uni.showToast({
          title: '必须将信息填写完整',
          icon: 'error'
        });
        return false;
      }
      return true;
    },
    onNextStep() {
      if (this.validateInputs()) {
        // 当所有输入字段都填写时，执行下一步操作或导航到另一页
		this.showKeyboard = true;
		this.password='';//唤醒输入组件时清空密码 // 显示密码输入框
      }
    },
	// 监听键盘输入：
	onChange(val) {
					if (this.password.length < 6) {
						this.password += val;
					}
	
					if (this.password.length >= 6) {
						this.finish();//封装的结束函数，我是在后续还有请求接口和判断等
					}
				},
	// 监听键盘回退：
	onBackspace(e) {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			},
	// 结束函数：
	finish() {
			this.showKeyboard = false;
				console.log();
				//可以放请求的接口及付款后的判断等
				accounttran({
					recipientCardNumber:this.code,
					recipientName:this.recipientName,
					recipientBank:this.recipientBank,
					senderCardNumber:this.fullBankCard,
					amount:this.value3,
					payPassword:this.password,
					note:this.value4
				}).then((res)=>{
					if(res.data.code==200){
						uni.navigateTo({
							url:"/pages/operator/operator"
						})
					}
				})
	}
  }
};
</script>

<style>
.numbert{
		background-color: #f7f7f7;
		height: 1680rpx;
}
.numbert1{
	margin-top: 30rpx;
	background-color: white;
}
.numbert1-1{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 90rpx;
	border-bottom: 1rpx solid rgba(128, 128, 128,0.2);
	font-size: 35rpx;
}
.numbert1-11{
	margin-left: 20rpx;
}
.numbert2{
	background-color: white;
	height: 240rpx;
}
.numbert2-1{
	margin-left: 20rpx;
	margin-top: 20rpx;
	font-size: 35rpx;
	padding-top: 20rpx;
}
.numbert1-12{
	margin-right: 20rpx;
}
.numbert2-2{
	display: flex;
	justify-content: space-between;
	font-size: 30rpx;
	margin-top: 30rpx;
}
.numbert2-21{
	margin-left: -350rpx;
}
.numbert2-21 view:nth-child(2){
	font-size: 28rpx;
	color: rgb(128, 128, 128);
	margin-top: 10rpx;
}
.numbert2-2 image{
	width: 50rpx;
	height: 50rpx;
	margin-left: 28rpx;
	margin-right: 20rpx;
}
.numbert3{
	height: 330rpx;
	background-color: white;
	margin-top: 30rpx;
}
.numbert3-1{
	display: flex;
	justify-content: space-between;
}
.numbert3-1 view:nth-child(1){
	font-size: 40rpx;
	/* font-weight: 600; */
	margin-top: 20rpx;
	margin-left: 20rpx;
}
.numbert3-1 view:nth-child(2){
	font-size: 30rpx;
	color: rgb(0, 186, 158);
	margin-top: 20rpx;
	margin-right: 30rpx;
}
.numbert3-2{
	height: 180rpx;
	border-bottom: 1rpx solid rgba(128, 128, 128,0.2);
	display: flex;
	align-items: center;
	font-size: 80rpx;
}
.numbert3-3{
	font-size: 30rpx;
	color: rgb(128, 128, 128);
	margin-top: 20rpx;
	margin-left: 20rpx;
}
.numbert4{
	height: 220rpx;
	background-color: white;
	margin-top: 25rpx;
}
.numbert4-1{
	display: flex;
	justify-content: space-between;
	border-bottom: 1rpx solid rgba(128, 128, 128,0.2);
	height: 100rpx;
}
.numbert4-11{
	font-size: 35rpx;
	margin-top: 20rpx;
	margin-left: 20rpx;
}
.numbert4inp{
	margin-top: 10rpx;
	margin-right: 30rpx;
}
.numbert4-2 view{
	color: rgb(128, 128, 128);
	border: 1rpx solid  rgba(128, 128, 128,0.6);
	border-radius: 30rpx;
	height: 65rpx;
	width: 170rpx;
	font-size: 30rpx;
	text-align: center;
	line-height: 65rpx;
	margin: 10rpx 40rpx;
}
.numbert4-2{
	display: flex;
	margin-top: 20rpx;
}
.numbert5{
	width: 700rpx;
	height: 100rpx;
	background-color: #ffa500ad;
	margin-left: 30rpx;
	color: white;
	text-align: center;
	line-height: 100rpx;
	border-radius: 10rpx;
	margin-top: 80rpx;
}
.numbert6{
	font-size: 32rpx;
	width: 700rpx;
	color: rgb(128, 128, 128);
	margin-left: 20rpx;
	margin-top: 50rpx;
}
</style>

